<template>
  <div class="hello">
    <h2>Suspense 示例</h2>
    <suspense>
      <!-- 加载异步组件 -->
      <template #default>
        <async-component />
      </template>
      <!-- 加载中的提示 -->
      <template #fallback>
        <div>Loading...</div>
      </template>
    </suspense>
  </div>
</template>
  
<script>
import { defineAsyncComponent } from "vue";
// 动态导入异步组件
const AsyncComponent = defineAsyncComponent(async () => {
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve("ok");
    }, 3000);
  });
  let comPromise = import("./AsyncComponent.vue");
  comPromise.then((res) => {
    console.debug("%c  res", "font-size:30px;", res);
  })
  return comPromise;
});
export default {
  name: "SuspenseDemo",
  props: {
    msg: String,
  },
  components: {
    AsyncComponent,
  },
};
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
</style>
  